<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Affan - PWA Mobile HTML Template">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <meta name="theme-color" content="#0134d4">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Title -->
  <title>Affan - PWA Mobile HTML Template</title>

  <!-- Favicon -->
  <link rel="icon" href="img/core-img/favicon.ico">
  <link rel="apple-touch-icon" href="img/icons/icon-96x96.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/icons/icon-152x152.png">
  <link rel="apple-touch-icon" sizes="167x167" href="img/icons/icon-167x167.png">
  <link rel="apple-touch-icon" sizes="180x180" href="img/icons/icon-180x180.png">

  <!-- Style CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Web App Manifest -->
  <link rel="manifest" href="manifest.json">
</head>

<body>
  <!-- Preloader -->
  <div id="preloader">
    <div class="spinner-grow text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

  <!-- Internet Connection Status -->
  <div class="internet-connection-status" id="internetStatus"></div>

  <!-- Dark mode switching -->
  <div class="dark-mode-switching">
    <div class="d-flex w-100 h-100 align-items-center justify-content-center">
      <div class="dark-mode-text text-center">
        <i class="bi bi-moon"></i>
        <p class="mb-0">Switching to dark mode</p>
      </div>
      <div class="light-mode-text text-center">
        <i class="bi bi-brightness-high"></i>
        <p class="mb-0">Switching to light mode</p>
      </div>
    </div>
  </div>

  <!-- RTL mode switching -->
  <div class="rtl-mode-switching">
    <div class="d-flex w-100 h-100 align-items-center justify-content-center">
      <div class="rtl-mode-text text-center">
        <i class="bi bi-text-right"></i>
        <p class="mb-0">Switching to RTL mode</p>
      </div>
      <div class="ltr-mode-text text-center">
        <i class="bi bi-text-left"></i>
        <p class="mb-0">Switching to default mode</p>
      </div>
    </div>
  </div>

  <!-- Setting Popup Overlay -->
  <div id="setting-popup-overlay"></div>

  <!-- Setting Popup Card -->
  <div class="card setting-popup-card shadow-lg" id="settingCard">
    <div class="card-body">
      <div class="container">
        <div class="setting-heading d-flex align-items-center justify-content-between mb-3">
          <p class="mb-0">Settings</p>
          <div class="btn-close" id="settingCardClose"></div>
        </div>

        <div class="single-setting-panel">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="availabilityStatus" checked>
            <label class="form-check-label" for="availabilityStatus">Availability status</label>
          </div>
        </div>

        <div class="single-setting-panel">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="sendMeNotifications" checked>
            <label class="form-check-label" for="sendMeNotifications">Send me notifications</label>
          </div>
        </div>

        <div class="single-setting-panel">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="darkSwitch">
            <label class="form-check-label" for="darkSwitch">Dark mode</label>
          </div>
        </div>

        <div class="single-setting-panel">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="rtlSwitch">
            <label class="form-check-label" for="rtlSwitch">RTL mode</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Header Area -->
  <div class="header-area" id="headerArea">
    <div class="container">
      <!-- Header Content -->
      <div class="header-content position-relative d-flex align-items-center justify-content-between">
        <!-- Back Button -->
        <div class="back-button">
          <a href="elements.html">
            <i class="bi bi-arrow-left-short"></i>
          </a>
        </div>

        <!-- Page Title -->
        <div class="page-heading">
          <h6 class="mb-0">Testimonial</h6>
        </div>

        <!-- Settings -->
        <div class="setting-wrapper">
          <div class="setting-trigger-btn" id="settingTriggerBtn">
            <i class="bi bi-gear"></i>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="page-content-wrapper py-3">
    <!-- Element Heading -->
    <div class="container">
      <div class="element-heading">
        <h6>Testimonial 01</h6>
      </div>
    </div>

    <div class="container">
      <div class="testimonial-slide-one-wrapper">
        <div class="testimonial-slide testimonial-style1">
          <!-- Single Testimonial Slide -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="single-testimonial-slide">
                  <div class="image-wrapper shadow"><img src="img/bg-img/20.jpg" alt=""></div>
                  <div class="text-content">
                    <p class="mb-2">I strongly recommend this agency to everyone interested in running a business.</p>
                    <span class="d-block">- Riyadh</span>
                  </div><i class="bi bi-chat-quote text-warning"></i>
                </div>
              </div>
            </div>
          </div>

          <!-- Single Testimonial Slide -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="single-testimonial-slide">
                  <div class="image-wrapper shadow"><img src="img/bg-img/2.jpg" alt=""></div>
                  <div class="text-content">
                    <p class="mb-2">You've saved our business! Thanks guys, keep up the good work! The best on the net!
                    </p><span class="d-block">- Affan</span>
                  </div><i class="bi bi-chat-quote text-warning"></i>
                </div>
              </div>
            </div>
          </div>

          <!-- Single Testimonial Slide -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="single-testimonial-slide">
                  <div class="image-wrapper shadow"><img src="img/bg-img/21.jpg" alt=""></div>
                  <div class="text-content">
                    <p class="mb-2">Absolutely wonderful! I wish I would have thought of it first. I would be lost
                      without agency.</p><span class="d-block">- Designing World</span>
                  </div><i class="bi bi-chat-quote text-warning"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Element Heading -->
    <div class="container">
      <div class="element-heading mt-3">
        <h6>Testimonial 02</h6>
      </div>
    </div>

    <div class="container">
      <div class="card">
        <div class="card-body p-0">
          <div class="testimonial-slide-two-wrapper">
            <div class="testimonial-slide2 testimonial-style2">
              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="image-wrapper shadow-sm"><img src="img/bg-img/2.jpg" alt=""><i class="bi bi-chat-quote"></i>
                </div>
                <div class="text-content">
                  <p class="mb-0">I strongly recommend this agency to everyone interested a business.</p>
                </div>
              </div>

              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="image-wrapper shadow-sm"><img src="img/bg-img/20.jpg" alt=""><i
                    class="bi bi-chat-quote"></i></div>
                <div class="text-content">
                  <p class="mb-0">You've saved our business! Thanks guys, keep up the good work!</p>
                </div>
              </div>

              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="image-wrapper shadows-sm"><img src="img/bg-img/21.jpg" alt=""><i
                    class="bi bi-chat-quote"></i></div>
                <div class="text-content">
                  <p class="mb-0">Absolutely wonderful! I wish I would have thought of it first.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Element Heading -->
    <div class="container">
      <div class="element-heading mt-3">
        <h6>Testimonial 03</h6>
      </div>
    </div>

    <div class="container">
      <div class="card">
        <div class="card-body">
          <h2>Customer Review</h2>
          <div class="testimonial-slide-three-wrapper">
            <div class="testimonial-slide3 testimonial-style3">
              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="text-content"><span class="d-inline-block badge bg-danger mb-2">Top</span>
                  <p class="mb-2">I strongly recommend this agency to everyone interested in running a business.</p>
                  <span class="d-block">- Suha, Designingworld</span>
                </div>
              </div>

              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="text-content"><span class="d-inline-block badge bg-warning mb-2">Top</span>
                  <p class="mb-2">You've saved our business! Thanks guys, keep up the good work! The best on the net!
                  </p><span class="d-block">- Riyadhu, Shape Digital</span>
                </div>
              </div>

              <!-- Single Testimonial Slide -->
              <div class="single-testimonial-slide">
                <div class="text-content"><span class="d-inline-block badge bg-primary mb-2">Top</span>
                  <p class="mb-2">Absolutely wonderful! I wish I would have thought of it first. I would be lost without
                    agency.</p><span class="d-block">- Affan, Founder</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Nav -->
  <div class="footer-nav-area" id="footerNav">
    <div class="container px-0">
      <!-- Footer Content -->
      <div class="footer-nav position-relative">
        <ul class="h-100 d-flex align-items-center justify-content-between ps-0">
          <li class="active">
            <a href="home.html">
              <i class="bi bi-house"></i>
              <span>Home</span>
            </a>
          </li>

          <li>
            <a href="pages.html">
              <i class="bi bi-collection"></i>
              <span>Pages</span>
            </a>
          </li>

          <li>
            <a href="elements.html">
              <i class="bi bi-folder2-open"></i>
              <span>Elements</span>
            </a>
          </li>

          <li>
            <a href="chat-users.html">
              <i class="bi bi-chat-dots"></i>
              <span>Chat</span>
            </a>
          </li>

          <li>
            <a href="settings.html">
              <i class="bi bi-gear"></i>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- All JavaScript Files -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/slideToggle.min.js"></script>
  <script src="js/internet-status.js"></script>
  <script src="js/tiny-slider.js"></script>
  <script src="js/venobox.min.js"></script>
  <script src="js/countdown.js"></script>
  <script src="js/rangeslider.min.js"></script>
  <script src="js/vanilla-dataTables.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/imagesloaded.pkgd.min.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>
  <script src="js/dark-rtl.js"></script>
  <script src="js/active.js"></script>
  <script src="js/pwa.js"></script>
</body>

</html>